<template>
  <div>
  <el-breadcrumb :separator-icon="ArrowRight">
    <el-breadcrumb-item>首页</el-breadcrumb-item>
    <el-breadcrumb-item><b>公告管理</b></el-breadcrumb-item>
  </el-breadcrumb>
  </div>
  <!--  数据表格-->
  <div style="margin:20px">
    <el-table :data="noticeInfo" stripe border style="width: 100%">
      <el-table-column prop="id" label="序号" width="55px" >
        <template #default="{ row }">
          <!-- 根据状态改变文本颜色 -->
          <span :class="statusClass(row.id)">
              {{ row.id }}
            </span>
        </template>
      </el-table-column>
      <el-table-column prop="title" label="标题" width="180px"/>
      <el-table-column prop="content" label="详情"  />
      <el-table-column prop="publishdt" label="发布时间" />
      <el-table-column prop="status" label="状态" >
        <template #default="{ row }">
          <!-- 根据状态改变文本颜色 -->
          <span :class="statusClass(row.status)">
              {{ row.status }}
            </span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200px" align="center">
        <template #default="{ row }">
          <!-- 操作按钮 -->
          <el-button
              type="success"
              size="default"
              :disabled="approveDisabledMap[row.id]"
              @click="approveAudit(row)"
          >
            <el-icon><CircleCheck /></el-icon>同意
          </el-button>
          <el-button
              type="danger"
              size="default"
              :disabled="rejectDisabledMap[row.id]"
              @click="rejectAudit(row)"
          >
            <el-icon><CircleClose /></el-icon>拒绝
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <!--  分页-->
  <div class="page">
    <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[8,10]"
        :small="small"
        :disabled="disabled"
        :background="background"
        layout="sizes, prev, pager, next"
        :total="totals"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    />
  </div>
</template>
<script setup>
import {ArrowRight, Delete, CircleCheck,CircleClose} from '@element-plus/icons-vue'
import {onMounted, reactive, ref} from "vue";
import request from "@/utils/amusement"
import {ElMessage} from "element-plus";
onMounted(()=>{
  getNotice();
})
//分页
const currentPage = ref(1)
const pageSize = ref(8)
const small = ref(false)
const background = ref(false)
const disabled = ref(false)
let totals=ref(0);
const noticeInfo=ref([])
const getNotice=()=>{
  const params = {
    pageNum: currentPage.value,
    pageSize: pageSize.value,
    // 初始时不包含其他参数
  };
  request({
    url:'/admin/page',
    method:'get',
    params,
  }).then((req)=>{
    if (req.data.errorCode==200){
      noticeInfo.value=req.data.data.records;
      totals.value=req.data.data.total;
      noticeInfo.value.forEach((item) => {
        if(item.status == "已同意"){
          approveDisabledMap[item.id] = true;
          rejectDisabledMap[item.id] = true;
        }else if (item.status == "已拒绝") {
          approveDisabledMap[item.id] = true;
          rejectDisabledMap[item.id] = true;
        }else if(item.status == "未审核"){
          approveDisabledMap[item.id] = false;
          rejectDisabledMap[item.id] = false;
        }
      });
    }
  })
}
const handleSizeChange = (val) => {
  pageSize.value=val;
  getNotice()
}
const handleCurrentChange = (val) => {
  currentPage.value=val;
  getNotice()
}

// 同意和拒绝按钮的禁用状态映射
const approveDisabledMap = reactive({});
const rejectDisabledMap = reactive({});
const statusClass = (status) => {
  switch (status) {
    case '未审核':
      return 'status-normal';
    case '已通过':
      return 'status-delayed';
    case '已拒绝':
      return 'status-cancelled';
    default:
      return '';
  }
};

const approveAudit = (row) => {
  // 模拟同意审核操作
 request({
   url:'/admin/approve',
   method:'get',
   params:{
     id: row.id
   }
 }).then(req=>{
   if (req.data.errorCode==200){
     ElMessage.success("审核通过");
     row.status="已同意";
     getNotice();
   }
 })
};

const rejectAudit = (row) => {
  // 模拟拒绝审核操作
  request({
    url:'/admin/reject',
    method:'get',
    params:{
     id: row.id
    }
  }).then(req=>{
    if (req.data.errorCode==200){
      ElMessage.success("审核未通过");
      row.status="已拒绝";
      getNotice();
    }
  })
};
</script>
<style scoped>
.el-breadcrumb{
  font-size: 18px;
  margin: 20px;
}
.page{
  margin-left: 30%;
}
.status-normal {
  color: blue;
}

.status-delayed {
  color: green;
}

.status-cancelled {
  color: red;
}
</style>